<template>
	<view class="address-form-container">
		<view class="address-form">
			<!-- 默认收货地址选项 -->
			<view class="default-address">
				<text class="tx">填写地址</text>
				<u-checkbox v-model="list.defaultStatus" shape="circle" label="" size="33" iconSize="24"
					@change="toggleDefaultAddress" :checked="list.defaultStatus"></u-checkbox>
				<text class="mran">默认收货地址</text>
			</view>
			<!-- 收货人信息 -->
			<view class="receiver-info">
				<text>收货人*</text>
				<input type="text" v-model="list.recipientName" placeholder="姓名" />
			</view>
			<!-- 联系电话信息 -->
			<view class="contact-info">
						    <text>联系电话*</text>
						    <input type="text" v-model="list.phoneNumber" placeholder="手机号码"/>
						    <!-- 手机号输入错误提示 -->
						    <view v-show="phoneNumberError" class="error-message">
						    	<text>手机号输入错误，请检查</text>
						    </view>
						</view>
			<!-- 所在地区信息 -->
			<view class="address-info">
				<text>所在地区省</text>
				<input type="text" v-model="list.state" placeholder="省" />
			</view>
			<view class="address-info">
				<text>所在地区市</text>
				<input type="text" v-model="list.city" placeholder="市" />
			</view>
			<view class="address-info">
				<text>所在地区区</text>
				<input type="text" v-model="list.districtOrCounty" placeholder="区" />
			</view>
			<!-- 详细地址信息 -->
			<view class="detailed-address">
				<text>详细地址*</text>
				<input type="text" v-model="list.addressLine" placeholder="小区，门牌号等" />
				<image src="/static/img/location.png" class="location-icon" />
			</view>

			<!-- 保存地址按钮 -->
			<button class="save-address-button" :class="{ 'disabled-button': !isValidPhoneNumber }"  :disabled="!isValidPhoneNumber" @click="saveAddress">保存地址</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: {
					recipientName: '',
					phoneNumber: '',
					addressLine: '',
					districtOrCounty: '',
					city: '',
					state: '',
					defaultStatus: false,
					// 如果有需要的话，还可以添加其他字段
				},
				phoneNumberError: false,
		
			};
		},
		computed: {
					isValidPhoneNumber() {
						// 正则表达式验证手机号格式
						const phoneRegex = /^[1][3-9]\d{9}$/;
						return phoneRegex.test(this.list.phoneNumber);
					}
				},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('updateaddree', data => {
				this.list = data.list; // 更新页面的数据
				console.log(this.list);
				/* this.moren(); */
			});
		},
		methods: {
			toggleDefaultAddress() {
				this.list.defaultStatus = !this.list.defaultStatus;
			},
			saveAddress() {
				if (!this.isValidPhoneNumber) {
									this.phoneNumberError = true;
									setTimeout(() => {
										this.phoneNumberError = false;
									}, 1000); // 一秒后隐藏错误提示
									return; // 不保存地址并退出函数
								}
				let isDefaultFlag = this.list.defaultStatus ? 1 : 0; // 如果选中默认地址，传值为1，否则为0
				let addressData = {
					addressId: this.list.addressId, // 假设有这个字段
					userId: this.list.userId, // 假设列表中只有一个条目
					recipientName: this.list.recipientName,
					phoneNumber: this.list.phoneNumber,
					addressLine: this.list.addressLine,
					districtOrCounty: this.list.districtOrCounty,
					city: this.list.city,
					state: this.list.state,
					defaultStatus: isDefaultFlag, // 如果选中默认地址，传值为1，否则为0
				};
				console.log(addressData);
				// 这里可以添加保存地址到后端的逻辑
				this.request("/addresses/updateaddress", "post", addressData).then(
					(res) => {
						console.log(res);
					}).catch((err) => {
					console.log(err);
				});
				uni.navigateBack({
					delta: 1
				});
			}
		}
	};
</script>
<style>
	.save-address-button {
		width: 88%;
		height: 80rpx;
		background-color: #f00;
		color: #fff;
		border-radius: 100rpx;
		position: fixed;
		bottom: 20rpx;
		line-height: 80rpx;
		border: none;
		outline: none;
		cursor: pointer;
	}
	.disabled-button::after {
		background-color: #ff9999;
		/* 淡红色 */
		color: #fff;
		/* 按钮文字颜色，确保可读性 */
		pointer-events: none;
		/* 禁止点击 */
		opacity: 0.7;
		/* 降低透明度，增加不可点击的感觉 */
	}
	
	.disabled-button:hover {
		transform: none;
		box-shadow: none;
	}
	.error-message {
		color: red;
		font-size: 14px;
		margin-top: 5px;
}
	.box-I {
		margin-top: 20rpx;
		width: 100%;
		height: 120rpx;
		border-radius: 20rpx;
		background-color: rgb(250, 250, 250);
	}

	.receiver-info input {
		margin-left: 70rpx;
	}

	.smart-input input {
		margin-left: 20rpx;
	}

	.zn {
		font-size: 33rpx;
		font-weight: 700;
	}

	.mran {
		color: #9b9b9b;
	}

	.tx {
		font-weight: 700;
		font-size: 33rpx;
		margin-right: 280rpx;
	}

	.address-form-container {
		background-color: #fff;
	}

	.address-form {
		padding: 20px;
	}

	.default-address {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.default-address switch {
		margin-right: 10px;
	}

	.address-info,
	.detailed-address {
		width: 100%;
		height: 120rpx;
		/* background-color: antiquewhite; */
		display: flex;
		align-items: center;
		/* 	margin-bottom: 10px; */
		border-top: 2rpx solid #d7d7d7;
	}

	.receiver-info,
	.contact-info {
		width: 100%;
		height: 90rpx;
		/* background-color: antiquewhite; */
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		border-top: 2rpx solid #d7d7d7;
	}

	.contact-info input,
	.address-info input,
	.detailed-address input {
		margin-left: 40rpx;
		flex: 1;
	}

	.location-icon {
		width: 20px;
		height: 20px;
		margin-left: 10px;
	}

	.smart-input {
		margin-top: 10px;
	}

	.save-address-button {
		width: 89%;
		height: 6%;
		border-radius: 80rpx;
		margin-bottom: 40rpx;
		position: absolute;
		bottom: 0;
		background-color: #ed0000;
		color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>